<template>
  <div id="OrderCase">
    <el-card>
      <h3 style="text-align: center">案件预约</h3>
      <el-form label-width="200px" :model="formData" ref="form" :rules="formRules">
        <el-form-item label="案件名称" prop="caseName">
          <el-input v-model="formData.caseName"></el-input>
        </el-form-item>
        <el-form-item label="案件描述" prop="caseComment">
          <el-input type="textarea" autosize v-model="formData.caseComment"></el-input>
        </el-form-item>
        <el-form-item label="案件种类" prop="caseTypeId">
          <el-select v-model="formData.caseTypeId">
            <el-option v-for="item in castTypes" :label="item.caseTypeName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择律师" prop="lawyerId">
          <el-select v-model="formData.lawyerId">
            <el-option v-for="item in lawyerList" :value="item.id" :label="item.lawyerName + '-' + item.location + '-' + item.position">
              <span style="float: left">{{ item.lawyerName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.location + '-' + item.position
                }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitCase">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {listCaseType} from "@/api/caseType";
import {insertCase} from "@/api/case";
import {listLawyer} from "@/api/Lawyer";

export default {
  name: "OrderCase",
  data() {
    return {
      castTypes: [],
      lawyerList: [],
      formData: {
        caseName: '',
        caseComment: '',
        caseTypeId: '',
        lawyerId: ''
      },
      formRules: {
        caseName: [
          {required: true, message: '请输入案件名称', trigger: 'blur'}
        ],
        caseComment: [{required: true, message: '请输入案件详细描述', trigger: 'blur'}],
        caseTypeId: [{required: true, message: '请选择案件种类', trigger: 'blur'}],
        lawyerId: [{required: true, message: '请选择一位律师', trigger: 'blur'}]
      }
    }
  },
  mounted() {
    this.getDict()
  },
  methods: {
    getDict() {
      listCaseType().then(res => {
        this.castTypes = res.data.list
      })
      listLawyer().then(res => {
        this.lawyerList = res.data.list
      })
    },
    submitCase() {
      this.$refs.form.validate(validate => {
        if (validate) {
          if (!this.$store.getters.username) {
            this.$message('请先登录')
            this.$router.push('/login')
            return
          }
          insertCase(this.formData).then(res => {
            if (res.resultCode === 200) {
              this.$message.success('提交成功,请点击我的头像查看预约结果')
            }
          })
        } else {
          return
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
#OrderCase {
  margin: 3px;
  width: 100%;
}
</style>
